<template>
	<view class="detail">
		<view class="uni-cardList">
			<uni-card margin="0" title="基础信息">
				<view class="content">
					<view class="content_list">
						<view>SN号:</view>
						<view class="content_item">{{inverterElectricEntity.serialNumber||"--"}}</view>
					</view>

					<view class="content_list">
						<view>产品型号:</view>
						<view class="content_item">{{inverterElectricEntity.madelName||"--"}}</view>
					</view>

					<view class="content_list">
						<view>制造商:</view>
						<view class="content_item">{{inverterElectricEntity.manufacturer||"--"}}</view>
					</view>
					<view class="content_list">
						<view>额定功率（点击功率可修改）:</view>
						<view class="content_item">
							<text style="padding-bottom: 2px; border-bottom: 1px solid #eee;" @click="changePower"
								v-if="!isChangePower">{{basicInfo.power||"--"}}KW</text>
							<input v-if="isChangePower" v-model="power"
								style="border: 1px solid #ddd;font-size: 12px;padding: 0 5px" @blur="updatePower" />
						</view>
					</view>
					<view style="font-size: 12px;padding: 4px 0;width: 100%;">
						<view>安装位置（点击地址可修改）:</view>
						<view class="content_item">
							<text style="padding-bottom: 2px; border-bottom: 1px solid #eee;" @click="toChange"
								v-if="!isChange">{{basicInfo.address||"--"}}</text>
							<input v-if="isChange" v-model="address"
								style="border: 1px solid #ddd;font-size: 12px;padding: 0 5px" @blur="updateDevice" />
						</view>
					</view>
				</view>
			</uni-card>
		</view>


		<!--  -->

		<view class="uni-cardList">
			<uni-card margin="0" title="发电">
				<view class="content_dcList">
					<view class="content_item">
						<view class="dcList_item dtitle"><text>直流</text></view>
						<view class="dcList_item">电压</view>
						<view class="dcList_item">电流</view>
						<view class="dcList_item">功率</view>
					</view>
					<view class="content_item" v-for="item in dcList" :key="item.id">
						<view class="dcList_item">{{item.title||"--"}}</view>
						<view class="dcList_item">{{item.voltage||"--"}}V</view>
						<view class="dcList_item">{{item.current||"--"}}A</view>
						<view class="dcList_item">{{item.power||"--"}}W</view>
					</view>
				</view>
				<view class="content_dcList acList">
					<view class="content_item">
						<view class="dcList_item atitle"><text>交流</text></view>
						<view class="dcList_item">电压</view>
						<view class="dcList_item">电流</view>
						<view class="dcList_item">频率</view>
					</view>
					<view class="content_item" v-for="item in acList" :key="item.id">
						<view class="dcList_item">{{item.title||"--"}}</view>
						<view class="dcList_item">{{item.voltage||"--"}}V</view>
						<view class="dcList_item">{{item.current||"--"}}A</view>
						<view class="dcList_item">{{item.rate||"--"}}Hz</view>
					</view>
				</view>
			</uni-card>
		</view>


		<!--  -->

		<view class="uni-cardList">
			<uni-card margin="0" title="电网">
				<view class="content power_basic">
					<view class="content_list">
						<view>直流输入总功率:</view>
						<view class="content_item">{{basicInfo.allDCPower||"--"}}W</view>
					</view>

					<view class="content_list">
						<view>交流输出总功率(有功):</view>
						<view class="content_item">{{basicInfo.allActivePower||"--"}}W</view>
					</view>
					<view class="content_list">
						<view>功率因数值:</view>
						<view class="content_item">{{basicInfo.powerFactor||"--"}}</view>
					</view>
					<view class="content_list">
						<view>前一日发电量:</view>
						<view class="content_item">{{basicInfo.yesterdayPower||"--"}}KWh</view>
					</view>
					<view class="content_list">
						<view>累计发电量(有功):</view>
						<view class="content_item">{{basicInfo.totalEnergy||"--"}}KWh</view>
					</view>
					<view class="content_list">
						<view>上月发电量(有功):</view>
						<view class="content_item">{{basicInfo.lastMonthPower||"--"}}KWh</view>
					</view>
					<view class="content_list">
						<view>当日发电量(有功):</view>
						<view class="content_item">{{basicInfo.todayEnergy||"--"}}KWh</view>
					</view>
					<view class="content_list">
						<view>当月发电量(有功):</view>
						<view class="content_item">{{basicInfo.currentMonthPower||"--"}}KWh</view>
					</view>
					<view class="content_list">
						<view>当年发电量(有功):</view>
						<view class="content_item">{{basicInfo.totalYearAmount||"--"}}KWh</view>
					</view>
					<view class="content_list">
						<view>总PV电压:</view>
						<view class="content_item">{{allPv||'--'}}KWh</view>
					</view>
					<view class="content_list">
						<view>总PV电流:</view>
						<view class="content_item">{{allA||'--'}}A</view>
					</view>
				</view>
			</uni-card>
		</view>


		<!--  -->
		<view class="uni-cardList">
			<uni-card margin="0" title="用电">
				<view class="content">
					<view class="content_list">
						<view>累计用电量:</view>
						<view class="content_item">--</view>
					</view>
				</view>
			</uni-card>
		</view>

		<!--  -->

		<view class="uni-cardList">
			<uni-card margin="0" title="温度">
				<view class="content">
					<view class="content_list">
						<view>逆变器温度:</view>
						<view class="content_item">{{inverterElectricEntity.inverTemp||"--"}}℃</view>
					</view>
					<view class="content_list">
						<view>逆变器模块温度:</view>
						<view class="content_item">--</view>
					</view>
					<view class="content_list">
						<view>模块温度1:</view>
						<view class="content_item">--</view>
					</view>
				</view>
			</uni-card>
		</view>

		<!--  -->

		<view class="uni-cardList">
			<uni-card margin="0" title="其他">
				<view class="content">
					<view class="content_list">
						<view>系统时间:</view>
						<view class="content_item">{{basicInfo.createTime||"--"}}</view>
					</view>
					<view class="content_list">
						<view>绝缘阻抗值:</view>
						<view class="content_item">{{basicInfo.groundImpedance||"--"}}GΩ</view>
					</view>
					<view class="content_list">
						<view>母线电压:</view>
						<view class="content_item">{{basicInfo.busVoltage||"--"}}V</view>
					</view>
				</view>
			</uni-card>
		</view>
		<!--  -->
		<view class="uni-cardList">
			<uni-card margin="0" title="报警">
				<view class="content">
					<view class="content_list">
						<view>故障代码:</view>
						<view class="content_item">--</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view>
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getDeviceQueryInverterDetails,
		updateAddress
	} from "@/common/api/api.js"
	export default {
		props: {
			did: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				basicInfo: {},
				inverterElectricEntity: {},
				address: '',
				isChange: false,
				isChangePower: false,
				power: '',
				msgType: 'success',
				messageText: '',
				dcList: {
					voltage: '--',
					title: "--",
					power: "--",
					current: "--"
				},
				acList: {
					voltage: '--',
					title: "--",
					rate: "--",
					current: "--"
				},
				allPv: 0,
				allA: 0
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.getData()
			})
		},
		methods: {
			async getData() {
				let res = await getDeviceQueryInverterDetails({
					id: this.did
				})
				this.basicInfo.totalEnergy = res.data.baseInfo.totalEnergy
				this.basicInfo.todayEnergy = res.data.baseInfo.todayEnergy
				this.basicInfo.lastMonthPower = res.data.lastMonthPower
				this.basicInfo.totalYearAmount = res.data.totalYearAmount
				this.basicInfo.currentMonthPower = res.data.currentMonthPower
				this.basicInfo.address = res.data.baseInfo.address
				this.basicInfo.power = res.data.baseInfo.power
				this.basicInfo.yesterdayPower = res.data.yesterdayPower
				this.inverterElectricEntity = res.data.inverterElectricEntity
				this.dcList = res.data.dcList
				this.acList = res.data.acList
				this.allPv = this.dcList.reduce((p, c) => {
					return p + c.voltage * 1
				}, 0)
				this.allPv = this.allPv.toFixed(1)
				this.allA = this.dcList.reduce((p, c) => {
					return p + c.current * 1
				}, 0)
				this.allA = this.allA.toFixed(1)
			},
			//打开修改功率
			changePower() {
				this.isChangePower = true
			},
			//保存修改功率
			updatePower() {
				let pow = this.power.trim()
				if (pow == null || pow == '') {
					this.msgType = 'error'
					this.messageText = '功率不能为空'
					this.$refs.message.open()
					return
				}
				let p = {
					id: this.did,
					power: pow
				}
				updateAddress(p).then(res => {
					if (res.code == '000000') {
						this.msgType = 'success'
						this.messageText = '修改成功'
						this.isChangePower = false
						this.$nextTick(() => {
							this.getData()
						})
					} else {
						this.msgType = 'error'
						this.messageText = '保存失败，稍后重试'
					}
					this.$refs.message.open()
				})
			},
			//打开修改地址
			toChange() {
				this.isChange = true
			},
			//保存修改地址
			updateDevice() {
				let add = this.address.trim()
				if (add == null || add == '') {
					this.msgType = 'error'
					this.messageText = '安装地址不能为空'
					this.$refs.message.open()
					return
				}
				let device = {
					id: this.did,
					address: add
				}
				updateAddress(device).then(res => {
					if (res.code == '000000') {
						this.msgType = 'success'
						this.messageText = '修改成功'
						this.isChange = false
						this.$nextTick(() => {
							this.getData()
						})
					} else {
						this.msgType = 'error'
						this.messageText = '保存失败，稍后重试'
					}
					this.$refs.message.open()
				})
			}
		}
	}
</script>

<style scoped lang='scss'>
	.uni-cardList {
		margin-top: 8rpx;

		.content {
			display: flex;
			flex-wrap: wrap;

			.content_list {
				width: 50%;
				font-size: 24rpx;
				padding: 8rpx 0;

				.content_item {
					color: #333;
				}
			}
		}
	}



	.power_basic {
		border-top: 2rpx solid #ccc;
	}

	.acList {
		margin-top: 16rpx;
		border-top: 2rpx solid #ccc;
	}

	.content_dcList {
		.content_item {
			padding: 8rpx 0;
			display: flex;
			flex-wrap: wrap;

			.dcList_item {
				width: 25%;
			}

			.dtitle {
				text {
					background-color: #008B8B;
					padding: 4rpx;
					color: #fff;
				}
			}

			.atitle {
				text {
					background-color: #CD853F;
					padding: 4rpx;
					color: #fff;
				}
			}
		}
	}

	.content_basic {
		padding: 8rpx 0;
		display: flex;
		flex-wrap: wrap;
	}
</style>